<template>
  <div>
    <Cascader 
      :data="areaListFilter"
      :change-on-select='isChangeOnSelect'
      :disabled="isDisabled"
      v-model="value"
      @on-change="onSelectArea"
      placeholder="请选择地区"
    ></Cascader>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
    }
  },
  props: {
    value: {
      type: Array,
      default:() => []
    },
    isChangeOnSelect: {
      type: Boolean,
      default: false
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
  },
  mounted() {
    this.$store.dispatch('ajaxCascaderListCity')
  },
  methods: {
    onSelectArea(val, selectedData){
      this.$emit('input', val, selectedData)
    },
    onSelectAreaList(val) { 
      this.$emit('input', val)
    },
    updateArea(arr) {
      this.currValue = arr
    }
  },
  computed: {
    areaListFilter() {
      return this.cascaderListCity;
    },
    ...mapGetters(['cascaderListCity'])
  },
}
</script>

